<!DOCTYPE html>
<!--[if IE 8]>
<html lang="zh-CN" class="ie8" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-cmn-Hans-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<!--<![endif]-->
<head th:replace="head :: common_header(~{::title},~{::link})">
    <title>庭审信息管理平台-首页</title>
    <!-- ================== BEGIN PAGE LEVEL CSS STYLE ================== -->
    <link rel="stylesheet" th:href="@{/assets/css/index.css}"/>
    <!-- ================== END PAGE LEVEL CSS STYLE ================== -->
</head>
<body>
<!-- begin #page-container -->
<div id="page-container" class="page-container fade page-without-sidebar">
    <!--/*@thymesVar id="user" type="com.hxht.cmp.shiro.CustomRealm"*/-->
    <div th:replace="~{head.html :: head_nav(${session.user.realName})}"></div>
    <!-- begin #content -->
    <div id="content" class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="panel cmp-panel cmp_index_top_panel">
                    <div class="panel-body">
                        <div class="row">
                            <div class="cmp-plugins-count-col cmp-col-1">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">全省法庭</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-title-court">
                                        <span class="cmp-plugins-count-num-1"></span>
                                        <span class="cmp-plugins-count-num-2"></span>
                                        <span class="cmp-plugins-count-num-3"></span>
                                        <span class="cmp-plugins-count-num-4"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cmp-plugins-count-col cmp-col-2">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">科技法庭</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-title-courtTotal">
                                        <span class="cmp-plugins-count-num-1"></span>
                                        <span class="cmp-plugins-count-num-2"></span>
                                        <span class="cmp-plugins-count-num-3"></span>
                                        <span class="cmp-plugins-count-num-4"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="cmp-plugins-count-col cmp-col-3">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">平台接入</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-title-technologyCourtTotal">
                                        <span class="cmp-plugins-count-num-1"></span>
                                        <span class="cmp-plugins-count-num-2"></span>
                                        <span class="cmp-plugins-count-num-3"></span>
                                        <span class="cmp-plugins-count-num-4"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cmp-plugins-count-col cmp-col-4">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">排期总数</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-count-num-bg-6 cmp-plugins-title-courtPlan">
                                        <span class="cmp-plugins-count-num-1"></span>
                                        <span class="cmp-plugins-count-num-2"></span>
                                        <span class="cmp-plugins-count-num-3"></span>
                                        <span class="cmp-plugins-count-num-4"></span>
                                        <span class="cmp-plugins-count-num-5"></span>
                                        <span class="cmp-plugins-count-num-6"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cmp-plugins-count-col cmp-col-5">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">开庭总数</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-count-num-bg-6 cmp-plugins-title-closed">
                                        <span class="cmp-plugins-count-num-1"></span>
                                        <span class="cmp-plugins-count-num-2"></span>
                                        <span class="cmp-plugins-count-num-3"></span>
                                        <span class="cmp-plugins-count-num-4"></span>
                                        <span class="cmp-plugins-count-num-5"></span>
                                        <span class="cmp-plugins-count-num-6"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="cmp-plugins-count-col cmp-col-6">
                                <div class="cmp-plugins-count center">
                                    <div class="cmp-plugins-title">正在开庭</div>
                                    <div class="cmp-plugins-count-num cmp-plugins-title-open-court">
                                        <span class="cmp-plugins-count-num-1"></span>
                                        <span class="cmp-plugins-count-num-2"></span>
                                        <span class="cmp-plugins-count-num-3"></span>
                                        <span class="cmp-plugins-count-num-4"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 cmp-center-left-col">
                <div class="panel cmp-panel">
                    <div class="panel-body">
                        <ul class="nav nav-tabs cmp-left-tabs">
                            <li class="active"><a href="#left-tab-1" data-toggle="tab">今日开庭</a></li>
                            <li class=""><a href="#left-tab-2" data-toggle="tab">明日预告</a></li>
                            <li class=""><a href="#left-tab-3" data-toggle="tab">庭审回顾</a></li>
                        </ul>
                        <div class="tab-content cmp-left-tabs-content" id="cmp-left-tabs-content">
                            <div class="tab-pane fade active in" id="left-tab-1">
                                <ul class="media-list media-list-with-divider">
                                    <li class="media media-lg" th:each="one : ${todayCase}">
                                        <a th:href="@{/system_monitor/panel_living(planUid=${one.planUid},vlcCourtUid=${one.courtUid},courtRoomUid=${one.courtroomUid})}">
                                            <div class="cmp-left-media-item">
                                                <div class="cmp-left-media-item-img">
                                                    <span class="cmp-left-media-item-status"
                                                          th:text="${one.statusName}">正在开庭</span>
                                                    <img src="../assets/img" th:src="@{/assets/img/list_test2.jpg}"/>
                                                </div>
                                                <div class="cmp-left-media-item-content">
                                                    <p class="cmp-left-media-item-p cmp-left-media-item-title"
                                                       th:text="${one.name}"></p>
                                                    <p class="cmp-left-media-item-p cmp-left-media-item-addr"
                                                       th:text="${one.courtroomName}"></p>
                                                    <p class="cmp-left-media-item-p">
                                                        <span class="cmp-left-media-item-type"></span>
                                                        <span class="cmp-left-media-item-time">
                                                            <i class="fa fa-clock-o"></i>
                                                            <!--/*@thymesVar id="startDate" type="com"*/-->
                                                            <span th:utext="${one.startDate}"></span>
                                                        </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="cmp-left-tabs-link">
                                    <a href="javascript:" th:href="@{/more/more_notice (courtUid=${courtUid},flag=1)}">更多开庭>></a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="left-tab-2">
                                <ul class="media-list media-list-with-divider">
                                    <li class="media media-lg" th:each="two : ${tomorrowCase}">
                                        <a th:href="@{/system_monitor/panel_living(planUid=${two.planUid},vlcCourtUid=${two.courtUid},courtRoomUid=${two.courtroomUid})}">
                                            <div class="cmp-left-media-item">
                                                <div class="cmp-left-media-item-img">
                                                    <span class="cmp-left-media-item-status"
                                                          th:text="${two.statusName}">正在开庭</span>
                                                    <img src="../assets/img" th:src="@{/assets/img/list_test2.jpg}"/>
                                                </div>
                                                <div class="cmp-left-media-item-content">
                                                    <p class="cmp-left-media-item-p cmp-left-media-item-title"
                                                       th:text="${two.name}"></p>
                                                    <p class="cmp-left-media-item-p cmp-left-media-item-addr"
                                                       th:text="${two.courtroomName}"></p>
                                                    <p class="cmp-left-media-item-p">
                                                        <span class="cmp-left-media-item-type"></span>
                                                        <span class="cmp-left-media-item-time">
                                                            <i class="fa fa-clock-o"></i>
                                                            
                                                            <!--/*@thymesVar id="startDate" type="java.lang.String"*/-->
                                                            <span th:utext="${two.startDate}"></span>
                                                        </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="cmp-left-tabs-link">
                                    <a href="javascript:" th:href="@{/more/more_notice (courtUid=${courtUid},flag=2)}">更多开庭>></a>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="left-tab-3">
                                <ul class="media-list media-list-with-divider">
                                    <li class="media media-lg" th:each="three : ${reviewCase}">
                                        <a th:href="@{/system_monitor/panel_play(planUid=${three.uid},vlcCourtUid=${three.courtUid},courtRoomUid=${three.courtRoomUid})}">
                                            <div class="cmp-left-media-item">
                                                <div class="cmp-left-media-item-img">
                                                    <img src="../assets/img" th:src="@{/assets/img/list_test2.jpg}"/>
                                                </div>
                                                <div class="cmp-left-media-item-content">
                                                    <p class="cmp-left-media-item-p cmp-left-media-item-title"
                                                       th:text="${three.caseName}"></p>
                                                    <p class="cmp-left-media-item-p cmp-left-media-item-addr"
                                                       th:text="${three.courtroomName}"></p>
                                                    <p class="cmp-left-media-item-p">
                                                        <span class="cmp-left-media-item-type"
                                                              th:text="${three.caseTypeName}"></span>
                                                        <span class="cmp-left-media-item-time">
                                                            <i class="fa fa-clock-o"></i>
                                                            <span th:utext="${three.startDate}"></span>
                                                        </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="cmp-left-tabs-link">
                                    <a href="javascript:;"
                                       th:href="@{/more/more_review (courtUid=${courtUid})}">更多回顾>></a>
                                </div>
                            </div>
                        </div>
                        <div class="cmp-center-left-back">
                            <i class="fa fa-arrow-left fa-lg fa-fw"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 cmp-center-right-col">
                <div class="panel cmp-panel">
                    <div class="panel-body">
                        <p class="cmp-right-time-count">
                            <span class="cmp-right-time">2017年1月1日</span>
                            <span class="cmp-right-time">－</span>
                            <span class="cmp-right-time">4月7日</span>

                            <span class="cmp-right-count-text">T</span>
                            <span class="cmp-right-fileSizeTotal" th:text="${totalMap.countFileSize}">0</span>
                            <span class="cmp-right-count-text">总容量：</span>

                            <span class="cmp-right-count-text">小时</span>
                            <span class="cmp-right-openCourtTimeTotal" th:text="${totalMap.countOpenCourtTime}">0</span>
                            <span class="cmp-right-count-text">总时长：</span>
                        </p>
                        <div class="col-md-6 no-padding  cmp-center-map-col">
                            <div class="panel-body no-padding">
                                <div id="cmp-center-map" class="cmp-center-map">
                                    <div class="cmp-center-map-pingtan">
                                        <p><span class="map-pingtan-mouseout">平潭</span></p>
                                    </div>
                                    <div class="cmp-center-map-back">
                                        <i class="fa fa-arrow-left fa-lg fa-fw"></i>
                                    </div>
                                    <div id="cmp-center-map-local" class="cmp-center-map-local"></div>
                                    <div class="cmp-center-map-bottom">
                                        <p><i class="fa fa-balance-scale fa-lg"></i><span
                                                class="context-span">福建高院</span></p>
                                        <p><i class="fa fa-balance-scale fa-lg"></i><span class="context-span">平潭综合实验区人民法院</span>
                                        </p>
                                        <p><i class="fa fa-balance-scale fa-lg"></i><span
                                                class="context-span">福州铁路运输法院</span></p>
                                        <p><i class="fa fa-balance-scale fa-lg"></i><span
                                                class="context-span">厦门海事法院</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 no-padding cmp-right-col">
                            <div class="panel-body no-padding">
                                <div id="cmp-right" class="cmp-right">
                                    <div class="cmp-right-type">
                                        <table class="cmp-right-type-table">
                                            <tr>
                                                <td>
                                                    <div class="cmp-right-type-item cmp-right-type-bg-1">
                                                        <p class="cmp-right-type-item-num center">0</p>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="cmp-right-type-item cmp-right-type-bg-2">
                                                        <p class="cmp-right-type-item-num center">0</p>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="cmp-right-type-item cmp-right-type-bg-3">
                                                        <p class="cmp-right-type-item-num center">0</p>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="cmp-right-type-item cmp-right-type-bg-4">
                                                        <p class="cmp-right-type-item-num center">0</p>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="cmp-right-type-item cmp-right-type-bg-5">
                                                        <p class="cmp-right-type-item-num center">0</p>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="cmp-right-type-item cmp-right-type-bg-6">
                                                        <p class="cmp-right-type-item-num center">0</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="cmp-right-count-1">
                                        <ul class="nav nav-tabs cmp-right-tabs">
                                            <li class="active"><a href="#right-tab-1" data-toggle="tab">开庭数与时长</a></li>
                                            <li class=""><a href="#right-tab-2" data-toggle="tab">法庭数字化</a></li>
                                        </ul>
                                        <div class="tab-content cmp-right-tabs-content" id="cmp-right-tabs-content">
                                            <div class="tab-pane fade active in right-tab-1" id="right-tab-1">
                                            </div>
                                            <div class="tab-pane fade right-tab-2" id="right-tab-2">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cmp-right-count-2">
                                        <p class="cmp-right-count-2-title">法官开庭情况</p>
                                        <a id="judge_trial_url">
                                            <div class="cmp-right-count-2-judge-div" id="judge_div">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- end #content -->

    <!-- begin scroll to top btn -->
    <a href="javascript:;" class="btn btn-icon btn-circle btn-blue btn-scroll-to-top fade" data-click="scroll-top"><i
            class="fa fa-angle-up"></i></a>
    <!-- end scroll to top btn -->
</div>
<!-- end page container -->
<!-- ================== START IMPORT JS ================== -->
<div th:replace="head :: footer_js(~{::script})">
    <script th:src="@{/assets/plugins/echart/echarts.js}"></script>
    <script th:src="@{/assets/js/index.js}"></script>
    <!-- ================== END IMPORT JS ================== -->
    <script th:inline="javascript">
        //            console.log([[${reviewCase}]])
        var data = [[${totalMap}]];
        var anime = p.anime(50);
        setTimeout(function () {
            anime.close();
            p.show(data);
        }, 1000);
        var timeAndNumList = [[${timeAndNumList}]];
        p.initJudge(timeAndNumList)
    </script>
    <script>
        $(document).ready(function () {
            App.init();
        });
    </script>
</div>
</body>
</html>
